Integrating Storybook #143

mrmchughes · 2024-01-25T21:52:17Z

I've installed Storybook on my fork, and will start work on the Storybook tutorial. Is there a specific small component or something similar that we need converted over that would make for a good starting point?

thadk · 2024-01-28T02:19:50Z

Thanks Michael. Let's talk to the UX team for wishlist on Storybook to understand how they'd imagine it.

As a starting point any of the pieces of the design could be a good test component.

We have some components already in the components/ui/heat folder I think but they’re not very intricate yet state-wise, the situation where Storybook becomes pretty helpful . An ideal test could have some detailed state. Maybe a row of the table they’ve designed. Welcome to chat or ask the UX/design team for ideas.

thadk · 2024-01-28T02:53:43Z

I got it running with npm run storybook

I also ran npm run build-storybook and it put a static version into the heat-stack/storybook-static folder. Maybe as an enhancement you could change the target of this so it goes into public/heat-stack/storybook-static and make sure we're running that build command in the Dockerfile after the main build. Then when we merge this, we'll get Storybook at https://heat-stack.fly.io/storybook-static .

mrmchughes · 2024-01-29T20:37:58Z

Figuring the wishlist out with the UX team sounds great. Still working on the tutorial, I want to make sure I understand the fundamentals before I start working on our more complex compents.

thadk · 2024-02-06T16:48:03Z

Please try to get the storybook-static working as described above before converting to full non-draft PR.

mrmchughes · 2024-02-06T20:03:57Z

Hi Thad, I think I may have made some progress on this, but also running into a bug. When I run npm run build-storybook, I get an error in my terminal Error: Cannot copy './public' to a subdirectory of itself, './public/heat-stack/storybook-static/'.. It does seem to make a directory within public like you wanted though, so I'm not sure.

mrmchughes · 2024-02-06T20:08:35Z

I'm also getting an error from ESLint when I push a commit, I'm not sure why. This is what I've been using CLI options

thadk · 2024-02-07T08:51:34Z

Ah sorry @mrmchughes , I made a typo. public folder is inside heat-stack.

Please add your storybook-static folder to .eslintignore to solve the linter error on the autogenerated files: https://github.com/codeforboston/home-energy-analysis-tool/blob/main/heat-stack/.eslintignore

mrmchughes · 2024-02-12T22:06:43Z

I solved the Linter issue. I'm confused on how to get storybook-build pointed at the directory you want, since whenever I attempt to run the command with the -o modifier it seems to not work as intended. CLI Options

I have also attempted to modify the staticDirs in .storybook/main.ts, and this did not work.

thadk · 2024-02-14T20:09:22Z

@mrmchughes Good start. I saw the warning you mentioned.

Once I changed the staticDirs: [] in .storybook/main.ts, npm run build-storybook seems to work without any warnings now. Can you please update the PR with that change ~~and also resolve the broken test~~?

When I did a local git rebase main (don't forget to pull the latest main before you do it), the conflict issue with package.json and package-lock were resolved without further input from me. Hopefully you find the same.

We must all use http://localhost:3000/storybook-static/index.html , explicitly adding index.html as it does not get forwarded to that automatically.

home-energy-analysis-tool/heat-stack on  mrmchughes-main [$!?] via ⬢ v20.11.0
➜ npm run build-storybook

> build-storybook
> storybook build -o public/storybook-static

@storybook/cli v7.6.10

info => Cleaning outputDir: /public/storybook-static
info => Loading presets
info => Building manager..
info => Manager built (157 ms)
info => Building preview..
info => Copying static files: /Users/thadk/gitrepos/home-energy-analysis-tool/heat-stack/node_modules/@storybook/manager/static at /Users/thadk/gitrepos/home-energy-analysis-tool/heat-stack/public/storybook-static/sb-common-assets
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
vite v5.0.4 building for production...

./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
node_modules/telejson/dist/index.mjs (1413:15) Use of eval in "node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.
node_modules/telejson/dist/index.mjs (1416:18) Use of eval in "node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 585 modules transformed.

(!) The public directory feature may not work correctly. outDir /Users/thadk/gitrepos/home-energy-analysis-tool/heat-stack/public/storybook-static and publicDir /Users/thadk/gitrepos/home-energy-analysis-tool/heat-stack/public are not separate folders.

public/storybook-static/assets/context-tKiKnkuP.png                      6.12 kB
public/storybook-static/assets/styling-ZOs40c1G.png                      7.24 kB
public/storybook-static/iframe.html                                     12.77 kB │ gzip:   3.59 kB
public/storybook-static/assets/docs-Pvr7BWzI.png                        27.88 kB
public/storybook-static/assets/share-xgPlHEHy.png                       40.77 kB
public/storybook-static/assets/accessibility-Fv4dmnDm.png               42.34 kB
public/storybook-static/assets/figma-plugin-h9oRC4jr.png                44.25 kB
public/storybook-static/assets/theming--liSzaFj.png                     44.37 kB
public/storybook-static/assets/testing-HG80fZfa.png                     49.31 kB
public/storybook-static/assets/addon-library-VlAgJsjc.png              467.37 kB
public/storybook-static/assets/Header-Yyx952jD.css                       0.51 kB │ gzip:   0.30 kB
public/storybook-static/assets/Button-X8hm4PDT.css                       0.52 kB │ gzip:   0.29 kB
public/storybook-static/assets/Page-fZ7a-HXz.css                         0.93 kB │ gzip:   0.40 kB
public/storybook-static/assets/preview-mEb2NEJf.js                       0.15 kB │ gzip:   0.15 kB
public/storybook-static/assets/index-guxbp9UN.js                         0.21 kB │ gzip:   0.17 kB
public/storybook-static/assets/_commonjsHelpers-5-cIlDoe.js              0.24 kB │ gzip:   0.18 kB
public/storybook-static/assets/WithTooltip-V3YHNWJZ-GwSZL96B.js          0.36 kB │ gzip:   0.22 kB
public/storybook-static/assets/syntaxhighlighter-V7JZZA35-WPBhCczG.js    0.38 kB │ gzip:   0.24 kB
public/storybook-static/assets/index-I8O4U1tp.js                         0.49 kB │ gzip:   0.31 kB
public/storybook-static/assets/react-18-sFOusbzT.js                      0.55 kB │ gzip:   0.34 kB
public/storybook-static/assets/preview-VI2eoWmp.js                       0.64 kB │ gzip:   0.44 kB
public/storybook-static/assets/Button.stories-0iga8zI1.js                0.68 kB │ gzip:   0.42 kB
public/storybook-static/assets/preview-FeMd6tr7.js                       0.71 kB │ gzip:   0.41 kB
public/storybook-static/assets/index-PPLHz8o0.js                         0.77 kB │ gzip:   0.47 kB
public/storybook-static/assets/Header.stories-hb6q8xUr.js                0.84 kB │ gzip:   0.44 kB
public/storybook-static/assets/preview-bEa2SesL.js                       0.86 kB │ gzip:   0.55 kB
public/storybook-static/assets/jsx-runtime-FAfywPN3.js                   0.97 kB │ gzip:   0.61 kB
public/storybook-static/assets/entry-preview-PSo23f1w.js                 1.15 kB │ gzip:   0.67 kB
public/storybook-static/assets/Button-Uo63IcyS.js                        1.45 kB │ gzip:   0.62 kB
public/storybook-static/assets/DocsRenderer-NNNQARDV-k_y9uV3O.js         1.45 kB │ gzip:   0.76 kB
public/storybook-static/assets/Header-OOaRiEC9.js                        1.52 kB │ gzip:   0.72 kB
public/storybook-static/assets/index-ogXoivrg.js                         2.59 kB │ gzip:   1.26 kB
public/storybook-static/assets/preview-wm7zCcxo.js                       3.21 kB │ gzip:   1.37 kB
public/storybook-static/assets/iframe-qppWRlR7.js                        4.71 kB │ gzip:   1.82 kB
public/storybook-static/assets/preview-OnO0tzRj.js                       5.23 kB │ gzip:   2.41 kB
public/storybook-static/assets/index-XiNr8FW2.js                         7.16 kB │ gzip:   2.91 kB
public/storybook-static/assets/preview-u8M_OEO2.js                       7.62 kB │ gzip:   1.55 kB
public/storybook-static/assets/preview-MdQXpms2.js                       8.28 kB │ gzip:   3.17 kB
public/storybook-static/assets/Configure-WbjAQq7r.js                    25.43 kB │ gzip:  11.05 kB
public/storybook-static/assets/Color-6VNJS4EI-7giFKZTh.js               30.98 kB │ gzip:  11.71 kB
public/storybook-static/assets/preview-37XjEtlT.js                      72.07 kB │ gzip:  24.41 kB
public/storybook-static/assets/index-mLPG47JP.js                        78.40 kB │ gzip:  23.55 kB
public/storybook-static/assets/index-9vG4XYWr.js                       134.05 kB │ gzip:  43.21 kB
public/storybook-static/assets/entry-preview-docs-Zsivb1kh.js          322.56 kB │ gzip: 100.03 kB
public/storybook-static/assets/index-dzAlpN1l.js                       537.60 kB │ gzip: 175.90 kB
public/storybook-static/assets/Page.stories-CM5N41JH.js                563.10 kB │ gzip: 149.73 kB
public/storybook-static/assets/formatter-SWP5E3XI-nxg7nF0h.js          601.56 kB │ gzip: 186.20 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 6.74s
info => Preview built (7.28 s)
info => Output directory: /Users/thadk/gitrepos/home-energy-analysis-tool/heat-stack/public/storybook-static

heat-stack/package.json

thadk · 2024-11-16T17:09:20Z

Closing as main need was for developing the component #221 in parallel with the Python rules engine data, and now the component has been made. Thank you for the efforts.

mrmchughes added 3 commits January 25, 2024 16:37

test readme

2004b73

added Storybook

fd8eff3

Fixed TypeScript errors in Stories

d1ab5bd

initial comments for Button stories

80222af

mrmchughes added 2 commits February 6, 2024 14:36

Changed build-Storybook target to public/heat-stack/storybook-static

e659575

Changed build-storybook command

7e41849

fixed linter error

f223d99

mrmchughes added 2 commits February 12, 2024 17:07

further changes for build target

1109507

Initial Button Stories

973ea62

mrmchughes marked this pull request as ready for review February 14, 2024 01:06

Fixed TypeScript errors in Header.tsx

bd060f8

thadk requested changes Feb 14, 2024

View reviewed changes

heat-stack/package.json Show resolved Hide resolved

mrmchughes added 6 commits February 20, 2024 15:27

Updated package.json

8893282

began adding styles to button stories

7a6e03a

Test Commit

a079866

updated package.json

15c93d0

Merge remote-tracking branch 'upstream/main'

808d072

ran npm install

0aae714

mrmchughes requested a review from thadk March 13, 2024 22:53

thadk closed this Nov 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrating Storybook #143

Integrating Storybook #143

mrmchughes commented Jan 25, 2024

thadk commented Jan 28, 2024

thadk commented Jan 28, 2024 •

edited

Loading

mrmchughes commented Jan 29, 2024

thadk commented Feb 6, 2024

mrmchughes commented Feb 6, 2024

mrmchughes commented Feb 6, 2024 •

edited

Loading

thadk commented Feb 7, 2024 •

edited

Loading

mrmchughes commented Feb 12, 2024

thadk commented Feb 14, 2024 •

edited

Loading

thadk commented Nov 16, 2024 •

edited

Loading

Integrating Storybook #143

Integrating Storybook #143

Conversation

mrmchughes commented Jan 25, 2024

thadk commented Jan 28, 2024

thadk commented Jan 28, 2024 • edited Loading

mrmchughes commented Jan 29, 2024

thadk commented Feb 6, 2024

mrmchughes commented Feb 6, 2024

mrmchughes commented Feb 6, 2024 • edited Loading

thadk commented Feb 7, 2024 • edited Loading

mrmchughes commented Feb 12, 2024

thadk commented Feb 14, 2024 • edited Loading

thadk commented Nov 16, 2024 • edited Loading

thadk commented Jan 28, 2024 •

edited

Loading

mrmchughes commented Feb 6, 2024 •

edited

Loading

thadk commented Feb 7, 2024 •

edited

Loading

thadk commented Feb 14, 2024 •

edited

Loading

thadk commented Nov 16, 2024 •

edited

Loading